<template>
    <div class="index">
        <div class="top">
            <div>
                <span>HAPPY</span>
                <span>MMALL</span>
            </div>
            <div>
                <p>欢迎 &emsp;{{user}} <i class="out" v-show="user">👇</i></p>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <el-menu router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="/home">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="/shop/index">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>商品</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/shop/index">商品管理</el-menu-item>
                            <el-menu-item index="/classify/index">品类管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="/order/index">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>订单</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/order/index">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="/user/list">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>用户</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/user/index">用户列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: "",
        };
    },
    methods: {
        handleClose() {},
        handleOpen() {},
    },
    created() {
        this.currentIndex = this.$route.path;
        if (localStorage.token) {
            this.user = JSON.parse(localStorage.token).username;
        }
    },
};
</script>

<style lang="scss" scoped>
.index {
    width: 100%;
    height: 100%;
    .top {
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        background-color: #ccc;
        div {
            span {
                font-weight: 600;
                font-size: 30px;
            }
            span:nth-child(1) {
                color: white;
            }
            span:nth-child(2) {
                color: yellowgreen;
            }
        }
    }
}
.main {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    justify-content: space-between;
    .left {
        flex-basis: 15%;
        height: 100%;
        .el-menu {
            height: 100%;
        }
        .el-menu-item {
            background-color: #444 !important;
        }
        .el-menu-item:hover {
            background-color: #999 !important;
        }
    }
    .right {
        flex-basis: 85%;
        padding: 30px 0;
        height: 100%;
        overflow: auto;
        background-color: #eee;
        padding: 20px 0 20px 30px;
    }
}
</style>